<template>
  <div class="device">
    <el-page-header @back="goBack" content="作战能力"> </el-page-header>
    <div class="content">
      <el-form
        ref="form"
        :model="form"
        label-width="80px"
        label-position="left"
      >
        <el-form-item label="一级名称">
          <el-select
            v-model="form.nameOne"
            placeholder="请选择"
            allow-create
            filterable
            style="width: 400px"
          >
            <el-option
              v-for="item in options"
              :key="item.value"
              :label="item.label"
              :value="item.value"
            >
            </el-option>
          </el-select>
        </el-form-item>
        <el-form-item label="名称">
          <el-input class="ipt" v-model="form.name"></el-input>
        </el-form-item>
        <el-form-item label="装备">
          <!-- <el-checkbox-group v-model="form.selectLsit">
            <template v-for="item in options">
              <el-checkbox :key="item.value">{{ item.label }}</el-checkbox>
            </template>
          </el-checkbox-group> -->
          <el-checkbox-group v-model="form.selectLsit">
            <el-checkbox label="0" name="type">指控</el-checkbox>
            <el-checkbox label="1" name="type">平台</el-checkbox>
            <el-checkbox label="2" name="type">数据链</el-checkbox>
            <el-checkbox label="3" name="type">武器</el-checkbox>
            <el-checkbox label="4" name="type">传感器</el-checkbox>
          </el-checkbox-group>
        </el-form-item>
      </el-form>
    </div>
    <div class="btn">
      <el-button type="primary">确定</el-button>
      <el-button>取消</el-button>
    </div>
  </div>
</template>
<script>
import { saveCapacityLevel } from "@/api/capacity";
export default {
  data() {
    return {
      form: {
        nameOne: "",
        name: "",
        selectLsit: [],
      },
      options: [
        {
          value: "0",
          label: "指控",
        },
        {
          value: "1",
          label: "平台",
        },
        {
          value: "4",
          label: "数据链",
        },
        {
          value: "3",
          label: "武器",
        },
        {
          value: "2",
          label: "传感器",
        },
      ],
    };
  },
  mounted() {
    const data = {
      capacityName: "dqwdw58245",
      capacityType: 0,
      pid: "a384e892-e9f7-4d82-aac7-bbd5bdd6fef6",
      relatedType: [1, 2, 3],
    };
    saveCapacityLevel(data).then((res) => {
      console.log(res);
    });
  },
  methods: {
    goBack() {
      this.$router.push(`/app/capacity/${this.$route.query.name}`);
    },
  },
};
</script>
<style lang="scss" scoped>
.btn {
  margin-top: 24px;
  text-align: right;
}
.content {
  margin-top: 24px;
}
:deep(.el-input).ipt {
  width: 400px;
}
.content {
  height: calc(100vh - 256px);
  overflow: auto;
}
</style>
